<template>
	<view :data-theme="themeStyle">
		<view v-show="show">
			<mescroll-uni @getData="getData" refs="mescroll" :size="10" v-if="seckillId && addonIsExit.seckill" @scroll="scroll">
				<block slot="list">
					<view class="ns-adv"><image :src="$util.img('upload/default/diy_view/index_seckill_gg.png')" mode="widthFix"></image></view>

					<view class="time-wrap">
						<image :src="$util.img('upload/uniapp/seckill.png')" mode="widthFix"></image>
						<scroll-view :scroll-x="true" class="scroll-wrap" scroll-with-animation :scroll-into-view="'a' + seckillId">
							<view class="time-item" v-for="(item, key) in timeList" :key="key" :id="'a' + item.id" @click="ontabtap(item.id, key)">
								<!-- 								v-if="key >= index && dataList.length > 0" -->
								<view class="span font-size-toolbar" :class="seckillId == item.id ? 'color-base-text' : ''">
									{{ transformSeckillTime(item.seckill_start_time) }}
								</view>
								<view class="em font-size-activity-tag color-sub" :class="seckillId == item.id ? 'color-base-bg active' : ''" v-if="key > index">敬请期待</view>
								<view class="em font-size-activity-tag color-sub" :class="seckillId == item.id ? 'color-base-bg active' : ''" v-if="key == index && !item.isNow">
									即将开始
								</view>
								<view class="em font-size-activity-tag color-sub" :class="seckillId == item.id ? 'color-base-bg active' : ''" v-if="key == index && item.isNow">
									抢购中
								</view>
								<view class="em font-size-activity-tag color-sub" :class="seckillId == item.id ? 'color-base-bg active' : ''" v-if="key < index">已结束</view>
							</view>
						</scroll-view>
					</view>

					<view class="goods-list single-column" v-if="dataList.length" @click="isEnd(seckillIndex < index && timeList[index].isNow)">
						<view class="goods-item margin-bottom" v-for="(item, goodsIndex) in dataList" :key="goodsIndex">
							<view class="goods-img" @click="toGoodsDetail(item.id, index)">
								<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(goodsIndex)"></image>
								<!-- <image :src="$util.img(item.sku_image, {size: 'mid'})" mode="widthFix" @error="imgError(goodsIndex)"></image> -->
								<view class="color-base-bg goods-tag" v-if="goodsTag(item) != ''">{{ goodsTag(item) }}</view>
							</view>
							<view class="info-wrap">
								<view class="name-wrap">
									<view class="goods-name" @click="toGoodsDetail(item.id, index)">{{ item.goods_name }}</view>
								</view>
								<view class="lineheight-clear">
									<view class="discount-price">
										<text class="unit font-size-tag">{{ $lang('common.currencySymbol') }}</text>
										<text class="price">{{ item.seckill_price.split('.')[0] }} <text class="font-size-toolbar">.{{ item.seckill_price.split('.')[1] }}</text></text>
									</view>
								</view>
								<view class="pro-info">
									<view class="delete-price color-tip">
										<text class="unit">{{ $lang('common.currencySymbol') }}</text>
										{{ item.price }}
									</view>
									<!-- <view @click.stop="getGoodsSkuDetail(item.id, index)"><button type="primary" size="mini">加入购物车</button></view> -->
								</view>
								
								<view class="careBox" v-if="item.goods_spec_format">
									<button class="info-btn color-base-bg" @click.stop="getGoodsSkuDetail(item)">选规格</button>
									<view v-if="item.num" class="tag-num">{{item.num}}</view>
								</view>
								
								<view class="careBox" v-if="!item.goods_spec_format">
									<button v-if="item.num <= 0 || !token" class="info-btn color-base-bg" @click.stop="cartNumChange('add', item)">加入购物车</button>
									<text v-if="item.num > 0" class="iconfont iconjianshao color-base-text" @click.stop="cartNumChange('minus', item)"></text>
									<input v-if="item.num > 0" :value="item.num" readonly disabled="disabled" unselectable="on" />
									<text v-if="item.num > 0" class="iconfont iconadd-fill color-base-text" @click.stop="cartNumChange('add', item)"></text>
								</view>
							</view>
						</view>
					</view>

					<view v-if="!dataList.length && showEmpty" style="z-index: 1 !important;"><ns-empty :fixed="!1" text="该时间段暂无秒杀商品"></ns-empty></view>
				</block>
			</mescroll-uni>
		</view>
		<view class="big-empty" v-show="!show"><ns-empty text="当前活动暂未开启"></ns-empty></view>
		
		<view class="cart-box" v-if="token" :class="{ active: isIphoneX }">
			<text class="cart-item">已加购<text class="color-base-text">{{cartNumber}}件</text>商品</text>
			<view class="pay-box">
				<text>合计:</text>
				<text class="color-base-text">￥ <text>{{cartPrice.toFixed(2)}}</text></text>
				<button type="default" class="color-base-bg" @click="pay()">去结算({{cartNumber}})</button>
			</view>
		</view>
		
		<loading-cover ref="loadingCover"></loading-cover>
		<ns-login ref="login"></ns-login>
		<ns-goods-sku-promotionpages ref="goodSkuNew" 
			@refresh="refreshGoodsSkuDetail" 
			:goods-detail="goodsSkuDetail" 
			:max-buy="goodsSkuDetail.max_buy"
			@getCartData="getCartData"></ns-goods-sku-promotionpages>
	</view>
</template>
<script>
import nsGoodsSkuPromotionpages from '@/components/ns-goods-sku/ns-goods-sku-promotionpages.vue';
import list from '../public/js/list.js';
export default {
	components: {
		nsGoodsSkuPromotionpages
	},
	data() {
		return {
			hour: '00',
			minute: '00',
			second: '00',
			ident: false,
			showEmpty: false
		};
	},
	onLoad() {},
	onShow() {
		this.token = uni.getStorageSync('token') ? uni.getStorageSync('token') : '';
		this.isIphoneX = this.$util.uniappIsIPhoneX();
		if (this.$util.uniappIsIPhone11()) {
			this.cartBottom = '30px';
		}
		if (!this.token) {
		} else {
			this.cart_show = false;
			this.isShowPoint = true;
		}
		
		if (!this.addonIsExit.seckill) {
			this.$util.showToast({
				title: '商家未开启秒杀',
				mask: true,
				duration: 2000
			});
			setTimeout(() => {
				this.$util.redirectTo('/pages/index/index/index', {}, 'redirectTo');
			}, 2000);
			return;
		}
		// 刷新多语言
		this.$langConfig.refresh();
		this.getTimeList();
	},
	computed: {
		themeStyle() {
			return 'theme-' + this.$store.state.themeStyle;
		},
		addonIsExit() {
			return this.$store.state.addonIsExit;
		}
	},
	async mounted() {
		this.$store.dispatch('getCartNumber');
		this.$store.dispatch('getCartPrice');
		this.$store.dispatch('getCartIds');
	},
	mixins: [list],
	methods: {},
	onReady() {
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.time-wrap')
				.boundingClientRect(data => {
					if (data) this.timeTop = data.top;
				})
				.exec();
		}, 500);
	}
};
</script>

<style lang="scss">
@import '../public/css/list.scss';
</style>
